<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试复制命令修复</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            line-height: 1.6;
        }
        .test-section {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 5px;
            padding: 20px;
            margin-bottom: 20px;
        }
        .code {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-radius: 3px;
            padding: 10px;
            font-family: 'Courier New', monospace;
            overflow-x: auto;
            white-space: pre-wrap;
            word-break: break-all;
            font-size: 12px;
        }
        .btn {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
            margin-bottom: 10px;
        }
        .btn:hover {
            background: #0056b3;
        }
        .success {
            color: #155724;
            background: #d4edda;
            padding: 10px;
            border-radius: 4px;
            margin: 10px 0;
        }
        .error {
            color: #721c24;
            background: #f8d7da;
            padding: 10px;
            border-radius: 4px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <h1>🔧 复制命令修复测试</h1>

    <div class="test-section">
        <h2>🐛 修复的问题</h2>
        <ul>
            <li><strong>Referer 为 undefined</strong> - 复制命令中 referer 参数显示为 "undefined"</li>
            <li><strong>文件名异常</strong> - 生成的文件名是 "3___" 等无意义字符串</li>
            <li><strong>标题提取失败</strong> - 视频标题显示为 "Unknown Video"</li>
        </ul>
    </div>

    <div class="test-section">
        <h2>📋 修复方案</h2>
        <h3>1. Referer 修复</h3>
        <div class="code">
// 修复前
referer: stream.referer  // 可能为 undefined

// 修复后
const referer = stream.referer || stream.page_url || 'https://bbs.huaweicloud.com';
        </div>

        <h3>2. 标题处理修复</h3>
        <div class="code">
// 修复前
const safeTitle = title.replace(/[^\w\s-]/g, '').replace(/\s+/g, '_');

// 修复后
if (!title || title === 'Unknown Video' || title.length < 3) {
  // 使用带时间戳的默认标题
  safeTitle = `华为云直播回放_${dateStr}_${timeStr}`;
} else {
  // 保留中文和常用字符，更好的清理逻辑
  safeTitle = title.replace(/[^\w\u4e00-\u9fa5\s\-_().]/g, '').replace(/[\s\u3000]+/g, '_');
}
        </div>
    </div>

    <div class="test-section">
        <h2>🧪 测试用例</h2>
        <div id="testResults"></div>

        <button class="btn" onclick="testTitleProcessing()">测试标题处理</button>
        <button class="btn" onclick="testRefererHandling()">测试 Referer 处理</button>
        <button class="btn" onclick="testCommandGeneration()">测试命令生成</button>
        <button class="btn" onclick="clearResults()">清除结果</button>
    </div>

    <div class="test-section">
        <h2>📝 测试步骤</h2>
        <ol>
            <li><strong>重新加载插件</strong> - 在 chrome://extensions/ 中刷新插件</li>
            <li><strong>访问目标页面</strong> - 打开华为云直播页面</li>
            <li><strong>打开开发者工具</strong> - 按 F12，查看 Console 标签</li>
            <li><strong>测试复制功能</strong> - 点击插件中的"复制"按钮</li>
            <li><strong>检查命令内容</strong> - 确认 referer 和文件名是否正确</li>
            <li><strong>查看调试日志</strong> - 在 Console 中查看详细的处理日志</li>
        </ol>
    </div>

    <script>
        const testResults = document.getElementById('testResults');

        function showResult(message, type = 'success') {
            const result = document.createElement('div');
            result.className = type;
            result.innerHTML = message;
            testResults.appendChild(result);
        }

        function clearResults() {
            testResults.innerHTML = '';
        }

        // 模拟标题处理函数
        function processTitle(title) {
            let safeTitle = title;

            if (!title || title === 'Unknown Video' || title.length < 3) {
                const now = new Date();
                const dateStr = now.toISOString().split('T')[0];
                const timeStr = now.toTimeString().split(' ')[0].replace(/:/g, '-');
                safeTitle = `华为云直播回放_${dateStr}_${timeStr}`;
            } else {
                safeTitle = title
                    .replace(/[^\w\u4e00-\u9fa5\s\-_().]/g, '')
                    .replace(/[\s\u3000]+/g, '_')
                    .replace(/[_]+/g, '_')
                    .replace(/^_+|_+$/g, '')
                    .substring(0, 50);
            }

            if (!safeTitle || safeTitle.length < 1) {
                safeTitle = `华为云直播回放_${new Date().toISOString().split('T')[0]}`;
            }

            return safeTitle;
        }

        function testTitleProcessing() {
            showResult('🧪 测试标题处理功能...', 'info');

            const testCases = [
                { input: 'Unknown Video', expected: '华为云直播回放_' },
                { input: '', expected: '华为云直播回放_' },
                { input: '3', expected: '华为云直播回放_' },
                { input: '一键搞定华为云万级资源，3步轻松管理企业成本', expected: '一键搞定华为云万级资源_3步轻松管理企业成本' },
                { input: '测试标题@#$%^&*()', expected: '测试标题' },
                { input: '  多个  空格  标题  ', expected: '多个_空格_标题' }
            ];

            testCases.forEach((testCase, index) => {
                const result = processTitle(testCase.input);
                const passed = result.includes(testCase.expected.split('_')[0]);

                showResult(
                    `测试 ${index + 1}: "${testCase.input}" → "${result}" ${passed ? '✅' : '❌'}`,
                    passed ? 'success' : 'error'
                );
            });
        }

        function testRefererHandling() {
            showResult('🧪 测试 Referer 处理功能...', 'info');

            const testCases = [
                { input: undefined, expected: 'https://bbs.huaweicloud.com' },
                { input: null, expected: 'https://bbs.huaweicloud.com' },
                { input: '', expected: 'https://bbs.huaweicloud.com' },
                { input: 'https://bbs.huaweicloud.com/live/cloud_live/202509051500.html', expected: 'https://bbs.huaweicloud.com/live/cloud_live/202509051500.html' }
            ];

            testCases.forEach((testCase, index) => {
                const result = testCase.input || testCase.page_url || 'https://bbs.huaweicloud.com';
                const passed = result === testCase.expected;

                showResult(
                    `测试 ${index + 1}: ${JSON.stringify(testCase.input)} → "${result}" ${passed ? '✅' : '❌'}`,
                    passed ? 'success' : 'error'
                );
            });
        }

        function testCommandGeneration() {
            showResult('🧪 测试命令生成功能...', 'info');

            const testUrl = 'https://tehlsvodhls02.vhallyun.com/vhallyun/vhallrecord/cf5fb15d/20250909161236_cf5fb15d/record_1080p.m3u8?token=TEST_TOKEN';
            const testReferer = 'https://bbs.huaweicloud.com/live/cloud_live/202509051500.html';
            const testTitle = '一键搞定华为云万级资源，3步轻松管理企业成本';

            const safeTitle = processTitle(testTitle);
            const command = `yt-dlp "${testUrl}" --referer "${testReferer}" -o "${safeTitle}.%(ext)s"`;

            showResult('生成的命令:', 'info');
            showResult(`<div class="code">${command}</div>`, 'success');

            // 检查命令的关键部分
            const checks = [
                { test: command.includes('--referer "https://bbs.huaweicloud.com'), desc: 'Referer 正确' },
                { test: command.includes('一键搞定华为云万级资源'), desc: '标题包含中文' },
                { test: command.includes('.%(ext)s'), desc: '扩展名模板正确' },
                { test: !command.includes('undefined'), desc: '没有 undefined' },
                { test: !command.includes('___'), desc: '没有异常下划线' }
            ];

            checks.forEach(check => {
                showResult(`${check.desc}: ${check.test ? '✅' : '❌'}`, check.test ? 'success' : 'error');
            });
        }

        // 页面加载时的初始化
        window.addEventListener('load', function() {
            showResult('🔧 复制命令修复测试工具已加载', 'success');
            showResult('点击上方按钮开始测试各项修复功能', 'info');
        });
    </script>
</body>
</html>